<template>
	<div>
		<div style="position: relative">
			<img src="@/assets/images/beijingtu.png" style="width: 100%;height: 20rem;" alt="">
		</div>
		<div style="width: 90%;height:23.5rem ; border: 3px solid #4E4E4E;
        border-radius: 30px; position: absolute;top: 14rem;left: 5%;background-color: #fff;">
			<div style="font-size: 24px;text-align: center;margin-top: 2rem;font-weight: bold;">
				登录
			</div>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 2rem;">
				<van-field v-model="loginForm.name" label="用户名:" placeholder="请输入用户名" ></van-field>
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 2rem;">
				<van-field label="密码:" placeholder="请输入密码" type="password" v-model="loginForm.password"></van-field>
			</van-cell-group>
			<div style="margin-top: 1.6rem;text-align: center;">
				<button
					style="width: 80%;height: 3rem;background-color: #01CBE2;border-radius: 30px;border-color: #4E4E4E;font-weight: bold;font-size: 20px;"
					@click="onClickLogin">立即登录</button>
			</div>
			<div style="margin-top: 2.5rem ;color: #a8a8a8;font-size: 18px;display: flex;align-items: center;position: absolute;left: 50%;"
				>
				<van-icon name="warning-o" size="20" />
				<div>还没有注册吗点击<span style="color: #01CBE2;" @click="onRegister">注册</span>吧</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loginAPI
	} from "@/api/user.js";
	import {
		getUserLocal,
		setUserLocal,
		setTokenLocal
	} from "@/utils/auth.js";
	export default {
		name: "login",
		data() {
			return {
				loginForm: {
					name: "dingding", //设置默认值，仅是方便调试
					password: "123456",
					radio: '1',
				},
			};
		},
		mounted() {
			//初始赋值 ，从本地存储中获取用户名
			this.loginForm.name = getUserLocal().name;
		},
		methods: {
			//处理用户登录
			onClickLogin() {
				if (this.loginForm.name === "" || this.loginForm.password === "") {
					this.$toast("账号或密码不能为空");
					return;
				}
				let params = this.loginForm;
				loginAPI(params).then(result => {
					this.$toast({
						message: "登录成功！",
						duration: 1000
					});
					//本地保存用户信息（id,name）保存Token
					setTokenLocal(result.data.token);
					setUserLocal(result.data.user);
					//登录成功后跳转到需要重定向的路径，默认是我的页面（user）
					let toPath = this.$route.params.redirect || "user";
					setTimeout(() => {
						this.$router.replace({
							path: toPath
						});
					}, 1000);
				}).catch((error) => {
					console.log(error);
				});;
			},
			//处理用户注册
			onRegister() {
				//路由跳转到用户注册页面
				this.$router.push({
					name: "register"
				})
			},
			onSelect() {
				this.radio = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.van-field {
		border-radius: 3rem;
		background-color: #f0f0f0;
		font-size: 18px;
	}
</style>
